<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">

    </div>
    <div id="app">

    </div>
</body>
<script src="./template.js"></script>
<script id="tem" type="text/html">
<!-- {{}} 固定写发 可以直接渲染属性名 -->
    <h1>{{name}}</h1>
    <h2>{{age}}</h2>
    <!-- if判断-->
    {{if sex}}
    <h3>男</h3>
    {{else}}
    <h3>女</h3>
    {{/if}}
    <!-- <h4>{{like}}</h4> -->
    <!-- 遍历 item 表示遍历得到的每一项 index表示索引-->
    {{each like as item index}}
        <h4>{{item}} ---- {{index}}</h4>
    {{/each}}
</script>

<script id="user" type="text/html">
    {{each zyz as item index}}
        <h5>{{item.name}} --- {{item.age}}</h5>
    {{/each}}
</script>
<script>
    let obj = {
        name:"张三",
        age:18,
        sex:true,
        like:["学习","打游戏","唱歌"]
    }
    // 获取字符串标签 参数一html模板id 参数二 将要渲染的数据 必须是对象类型  {  }
    let html = template("tem",obj);
    console.log(html)
    document.getElementById("box").innerHTML =  html;

    let userList = [
        {
            name:"张三",
            age:18
        },{
            name:"李四",
            age:20
        }
    ]
    let userhtml = template("user",{zyz:userList});
    console.log(userhtml)
    document.getElementById("app").innerHTML = userhtml
</script> 
</html>